<template>
  <el-form ref="form" label-width="100px" :model="form" :inline="inline">
      <!-- //inline是内联样式 不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化 -->
  <el-form-item v-for="item in formLabel" :key="item.label" :label="item.label">
    <!-- 这上面的label主要是渲染左边的哪些汉字 -->
    <!-- 这个里面的表单的数据因为是使用的v-for来渲染出来的 所以会有v-if这些 根据传过来的type确认类型 按照条件渲染
    坦率的说这种办法并不是很好 因为不止需要后端配合 需要接口里面给一个type值 而且我总感觉这样写特别容易报错
    而且他这边的绑定数据都是一样的 都是v-model绑定到form[item.model] -->
    <el-input v-if="item.type === 'input'"
    :placeholder="'请输入'+item.label"
    v-model="form[item.model]"
    ></el-input>
   <el-switch v-if="item.type === 'switch'" v-model="form[item.model]">-
   </el-switch>
   <el-date-picker v-if="item.type === 'date'" type="date" value-format="yyyy-MM-dd"
   placeholder="选择日期" v-model="form[item.model]"
   >
   </el-date-picker>
   <!-- 这些上面的label是渲染输入框中的哪些提示文字 -->
   <el-select v-if="item.type === 'select'" placeholder="请选择" v-model="form[item.model]" >
    <el-option v-for=" item in item.opts" :key="item.value" :label="item.label" :value="item.value">
     <!-- 这里没有v-model的原因是elementui里面v-model的值为当前被选中的el-option的 value 属性值 -->
    </el-option>
    <!-- 这里是下来列表的各个选项 -->
    </el-select>
  </el-form-item>
  <el-form-item><slot> 
    <!-- 预留一个插槽也同时是使用的列表组件的方式 也就是插入的内容也算列表组件里 -->
    </slot></el-form-item>
  </el-form>
</template>

<script>
export default {
 name:'CommonForm',
 //使用的是props代表数据也是从父组件传过来的
 props:{
    formLabel:Array, //这个formLabe这个form表单里面各个输入框的头部和中间提示的文字装的数组
    form:Object, //这个form看到上面的绑定的model内 就是最终接收数据的对象 这里使用了对象的特殊赋值方式 
    inline:Boolean, //使用的Vue里面的一个指令:inline 内联样式 
 },
 data()
 {
  return{
    name:'123'
  }
 }
}
</script>

<style>

</style>